<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../js/vue.js"></script>
    <style>
       table,tr,td,th{
            border: 1px solid #000;
        }
        table{
            width: 100%;
        }

    </style>
</head>

<body>
    <div id="app">
        <table>
            <tr>
                <th>序号</th>
                <th>茶叶名称</th>
                <th>茶叶类别</th>
                <th>排序</th>
                <th>茶叶介绍</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(tea,i) in teas" align="center">
                <td>{{i+1}}</td>
                <td>{{tea.teaName}}</td>
                <td>{{tea.teaType}}</td>
                <td>{{tea.ordered}}</td>
                <td>{{tea.description}}</td>
                <td>{{tea.status}}</td>
                <td>
                    <button>修改</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>

    </div>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                //创建一个茶叶对象的列表
                teas:[
                    {teaName:'金骏眉', teaType:'1', ordered:'100', description:'红茶红茶红茶红茶红茶红茶红茶', status:'1'},
                    {teaName:'金骏眉', teaType:'1', ordered:'100', description:'红茶红茶红茶红茶红茶红茶红茶', status:'1'},
                    {teaName:'金骏眉', teaType:'1', ordered:'100', description:'红茶红茶红茶红茶红茶红茶红茶', status:'1'},
                    {teaName:'金骏眉', teaType:'1', ordered:'100', description:'红茶红茶红茶红茶红茶红茶红茶', status:'1'},
                    {teaName:'金骏眉', teaType:'1', ordered:'100', description:'红茶红茶红茶红茶红茶红茶红茶', status:'1'},
                    {teaName:'金骏眉', teaType:'1', ordered:'100', description:'红茶红茶红茶红茶红茶红茶红茶', status:'1'},
                    {teaName:'金骏眉', teaType:'1', ordered:'100', description:'红茶红茶红茶红茶红茶红茶红茶', status:'1'},
                    {teaName:'金骏眉', teaType:'1', ordered:'100', description:'红茶红茶红茶红茶红茶红茶红茶', status:'1'},
                    {teaName:'金骏眉', teaType:'1', ordered:'100', description:'红茶红茶红茶红茶红茶红茶红茶', status:'1'},
                    {teaName:'金骏眉', teaType:'1', ordered:'100', description:'红茶红茶红茶红茶红茶红茶红茶', status:'1'},
                    {teaName:'金骏眉', teaType:'1', ordered:'100', description:'红茶红茶红茶红茶红茶红茶红茶', status:'1'},
                    {teaName:'金骏眉', teaType:'1', ordered:'100', description:'红茶红茶红茶红茶红茶红茶红茶', status:'1'},
                    {teaName:'金骏眉', teaType:'1', ordered:'100', description:'红茶红茶红茶红茶红茶红茶红茶', status:'1'},
                    {teaName:'金骏眉', teaType:'1', ordered:'100', description:'红茶红茶红茶红茶红茶红茶红茶', status:'1'},
                    {teaName:'金骏眉', teaType:'1', ordered:'100', description:'红茶红茶红茶红茶红茶红茶红茶', status:'1'}
                ]
            }
        })
    </script>
</body>
</html>